﻿@using M2B.GestionEntretiens.Helpers.HTML
@model dynamic

@{
    ViewBag.Title = "Questions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    var questionId = 0;
    //La liste des questions qui sera binder à la grid
    var questions;
    //Chargement du document
    $(document).ready(function () {
        LoadData();
    });

    //Chargement des questions
    function LoadData() {

        $.ajax({
            url: '@Url.Action("LoadQuestions", "Questions")',
            type: 'GET',
            cache: false,
            success: function (result) {

                questions = JSON.parse(result);
              
                LoadGridQuestions();
                
               
            }
        });

    }

    function LoadGridQuestions() {

        jQuery("#QuestionsTable").jqGrid({
            datatype: "jsonstring",
            datastr: questions,
            colNames: ["<img style='height:16px;width:16px;' src='../Content/Images/Ajouter.png' onclick='AjouterQuestion()'>", 'Id', 'Question', 'Type', 'Nb Réponses', 'Réponse', 'Evaluation', 'Modifier le'],
            colModel: [
                { name: 'act', index: 'act', width:40, sortable: false, search: false },
                { name: 'QuestionId', index: 'QuestionId', width: 40, sorttype: "integer", key: true, align: "right", hidden: true },
                { name: 'ContenuQuestion', index: 'ContenuQuestion', width: 200, sorttype: "string", align: "left" },
                {
                    name: 'Type',
                    index: 'Type',
                    width: 50,
                    sorttype: "integer", align: "right",
                    formatter: function (Type) {
                        if (Type == 1) {
                            return "<img style='height:16px;width:16px;' src='../Content/Images/Choix.png'/>";
                        } else {
                            return "<img style='height:16px;width:16px;' src='../Content/Images/Reponse.png'/>";
                        }
                    }
                },
                { name: 'MaxReponses', index: 'MaxReponses', width: 100, sorttype: "integer", align: "right" },
                { name: 'Reponse', index: 'Reponse', width: 200, sorttype: "string", align: "left" },
                {
                    name: 'Evaluation',
                    index: 'Evaluation',
                    width: 100,
                    sorttype: "integer", align: "right",
                    formatter: function (Evaluation) {
                        var result = "";
                        for (var i = 0; i < Evaluation; i++) {
                            result += "<img style='height:16px;width:16px;' src='../Content/Images/Rating.png'/>";
                        }
                        return result;
                    }
                },
                {
                    name: 'DateModification', index: 'DateModification', width: 80, align: "right", sorttype: "date", formatter: 'date',
                    formatoptions: {
                        srcformat: 'ISO8601Long',
                        newformat: 'd/m/Y',
                        defaultValue: null
                    }
                }
            ],
            rowNum: 10,
            shrinkToFit: true,
            rowList: [10, 20, 30],
            pager: '#QuestionsPager',
            height: 480,
            width: 950,
            sortname: 'QuestionId',
            viewrecords: true,
            loadonce: true,
            sortorder: "asc",
            multiselect: false,
            subGrid: true,
            caption: "Questions",
            reloadOnExpand: false,
            subGridOptions: {
             
                "reloadOnExpand": false,
                "selectOnExpand": true
            },
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; }
            },
            gridComplete: function () {
                var ids = jQuery("#QuestionsTable").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                   
                    var data = ids[i];
                    var btnEdit = "<img style='height:16px;width:16px;margin-right:5px;' src='../Content/Images/Editer.png' onclick='EditeQuestion(" + data + ")' />";
                    var btnSupprimer = "<img style='height:16px;width:16px;' src='../Content/Images/Supprimer.png' onclick='AfficherDeleteQuestionPopUp(" + data+ ")' />";
                    jQuery("#QuestionsTable").jqGrid('setRowData', ids[i], { act: btnEdit + btnSupprimer });
                }
            },
            subGridRowExpanded: function (subgridId, rowId) {
               
                var question = $(this).jqGrid("getRowData", rowId);
                
                var subgridTableId, pagerId;
                subgridTableId = subgridId + "_t";
                $("#" + subgridId).html("<div style='padding : 10px;'><table  id='" + subgridTableId + "' class='scroll'></table></div>");
                jQuery("#" + subgridTableId).jqGrid({
                    datatype: "local",
                    colNames: ['Id', 'Proposition', 'Réponse', 'Modifier le'],
                    colModel: [
                        { name: "PropositionId", index: "PropositionId", width: 40, align: "right", hidden: true },
                        { name: "ContenuProposition", index: "ContenuProposition", width: 150, align: "left" },
                        {
                            name: "IsReponse", index: "IsReponse", width: 80, align: "right", formatter: function (IsReponse) {

                                if (IsReponse == true) {
                                    return "<img style='height:16px;width:16px;' src='../Content/Images/Oui.png'/>";
                                } else {
                                    return "<img style='height:16px;width:16px;' src='../Content/Images/Non.png'/>";
                                }
                            }
                        },
                        {
                            name: "DateModification", index: "DateModification", width: 80, align: "right", formatter: 'date',
                            formatoptions: {
                                srcformat: 'ISO8601Long',
                                newformat: 'd/m/Y',
                                defaultValue: null
                            }
                        }

                    ],
                    rowNum: 20,
                    sortname: 'PropositionId',
                    sortorder: "asc",
                    height: '100%'
                });

               
                var data = [];

                for (var j = 0; j < questions.length; j++) {
                    if (questions[j].QuestionId == question.QuestionId) {
                        data = questions[j].Propositions;
                    }
                }
                for (var i = 0; i <= data.length; i++) {

                    $("#" + subgridTableId).addRowData(i, {
                        PropositionId: data[i].PropositionId, ContenuProposition: data[i].ContenuProposition,
                        IsReponse: data[i].IsReponse, Statut: data[i].Statut, DateModification: data[i].DateModification
                    });
                }
                }
     
        });
        
        jQuery("#QuestionsTable").jqGrid('navGrid', '#QuestionsPager', { edit: false, add: false, save: false, del: false, search: true, refresh: true });
  
        //Filtre sous les columns
        //jQuery("#QuestionsTable").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
       

    }

    function AfficherDeleteQuestionPopUp(question) {
        questionId = question;
        $("#dialogDeleteQuestion").dialog({ width: 400, position: ['center', 'center'], modal: true });
    }
    function DeleteQuestion() {

       $.ajax({
            url: '@Url.Action("DeleteQuestion")',
            type: 'POST',
            data: { questionId: questionId },success:function() {
                window.location.href = '@Url.Action("Index")';
            }
        });
        
    }
    function EditeQuestion(questionId) {

     
        $.ajax({
            type: "GET",
            data: { questionId: questionId },
            url: '@Url.Action("EditQuestion")',
            success: function (result) {
             
                $("#dialogEditQuestion").html(result).dialog({ width: 800, position: ['center', 'top'], modal: true });


            }
        });


    }
    //Ajouter une question
    function AjouterQuestion() {

        $.ajax({
            type: "GET",
            data: { questionId: questionId },
            url: '@Url.Action("AddQuestion")',
            success: function (result) {
               
                $("#dialogAddQuestion").html(result).dialog({ width: 800, position: ['center', 'top'], modal: true });


            }
        });
    }



</script>

<table id="QuestionsTable"></table>
<div id="QuestionsPager">
</div>
<div id="dialogAddQuestion" title="Ajouter une question" style="display: none;">

</div>
<div id="dialogEditQuestion" title="Edition d'une question" style="display: none;">

</div>
<div id="dialogDeleteQuestion" title="Supprimer une question" style="display: none;">
    <label> Voulez-vous vraiment supprimer cette question ?</label>
    <p style="float: right">
        @Html.ActionImage("", "", "~/Content/Images/Valider.png", "Valider", "32px", "32px", "DeleteQuestion()")
        @Html.ActionImage("Index", "", "~/Content/Images/Annuler.png", "Annuler", "32px", "32px", "")
    </p>
</div>
